<template>
    <div class="fieldManage zy-content ">
        <div class="searchBox">
            <Form label-position="right" :label-width="130" class="search-form">
            <Row>
                <Col span="5">
                    <FormItem label="字段名：">
                        <Input type="text" v-model="paramsList.name" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="字段编号：">
                        <Input type="text" v-model="paramsList.code" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col span="5" align="center">
                    <Button type="primary" v-if="checkBtnPermission.fieldConfigPage" @click="changeNum()">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
            </Form>
        </div>
        <div class="btns clear" >
            <span v-if="checkBtnPermission.fieldConfigInsert" class="creatBtnright" @click="createfaultCodeShowH">
                <span><Icon type="ios-add-circle-outline"/></span><span class="rightbtn">添加</span>
            </span>
        </div>
        <div class="tableContent">
              <Table ellipsis ref="selection" :columns="columns" :data="dataArr">
                <template slot-scope="{ row ,index}" slot="action">
                    <span class="operationBtn" @click="createfaultCodeShowH(row)" v-if="checkBtnPermission.fieldConfigUpdate">{{$t('common.Edit')}}</span>
                    <span class="operationBtn" @click="delPrrShowH(row)" v-if="checkBtnPermission.fieldConfigDelete">{{$t('common.Delete')}}</span>
                </template>
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <Modal :mask-closable="false"
            v-model="create"
            :title="addtitle"
            :loading="loading">
            <Form class="formList" :model="formItem" :label-width="100" >
                <FormItem label="字段名：" required >
                    <Input type="text" v-model="formItem.name" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem label="字段编号：" required >
                    <Input type="text" v-model="formItem.code" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default"  @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary"  @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false"
            v-model="delFaultCodeShowF"
            title=""
            :loading="loading">
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                    <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                     <span>{{$t('common.confirmDelete')}}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default"  @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary"  @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "fieldManage",
        components: {},
        data(){
            return{
                formItem:{

                },
                addtitle:"",
                allCheck:false,
                loading:false,
                create:false,
                paramsList:{

                },
                pageNum:1,
                pageSize:10,
                total:0,
                columns: [
                    {
                        title: '字段名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '字段编号',
                        key: 'code',
                        align: 'center'
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        width: 300,
                        align: "center"
                    }
                ],
                dataArr: [],
                delFaultCodeShowF: false,//是否显示删除弹窗
                pageSizeOption: [10,20,30,40],
                delIds:null,
                selection:[],
                checkBtnPermission:{},
            }
        },
        mounted(){
            this.searchList();
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="fieldConfigPage"){
                    this.checkBtnPermission.fieldConfigPage = true
                }
                if(item.code=="fieldConfigInsert"){
                    this.checkBtnPermission.fieldConfigInsert = true
                }
                if(item.code=="fieldConfigUpdate"){
                    this.checkBtnPermission.fieldConfigUpdate = true
                }
                if(item.code=="fieldConfigDelete"){
                    this.checkBtnPermission.fieldConfigDelete = true
                }
            }

        },
        methods:{
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.paramsList) {
                  if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                  }
                }
                this.axios({
                    method: 'get',
                    url: '/basic/fieldConfig/page',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                       this.dataArr = res.data.list
                       this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            createfaultCodeShowH(row){//点击增加或编辑
                if(row.id){
                    this.addtitle = `${this.$t('common.Edit')}`
                    this.formItem.name = row.name;
                    this.formItem.code = row.code;
                    this.formItem.id = row.id;
                }else{
                   this.addtitle = `${this.$t('common.New')}`
                    this.formItem = {};
                }
                this.create = true;
            },
            addOk(){
                if(this.formItem.name ===null||this.formItem.name ===undefined||this.formItem.name ===""){
                    this.$Message.warning(({content:"请输入字段名",duration:6,closable:true}));
                    return false;
                }
                if(this.formItem.code ===null||this.formItem.code ===undefined||this.formItem.code ===""){
                    this.$Message.warning(({content:"请输入字段编号",duration:6,closable:true}));
                    return false;
                }
                this.loading = true;
                if(this.formItem.id){
                    this.axios({
                        method: 'post',
                        url: '/basic/fieldConfig/update',
                        data: this.formItem
                    }).then(res => {
                        this.loading = false;
                        if(res.code === 200){
                            this.changeNum();
                            this.$Message.success("编辑成功");
                            this.create = false;
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }else{
                    this.axios({
                        method: 'post',
                        url: '/basic/fieldConfig/insert',
                        data: this.formItem
                    }).then(res => {
                        this.loading = false;
                        if(res.code === 200){
                            this.changeNum();
                            this.$Message.success("新增成功");
                            this.create = false;
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }

            },
            delPrrShowH(row) {
                //点击展示提示删除弹窗
                this.delFaultCodeShowF = true;
                this.delIds = row.id;

            },
            deleteOk(){
                this.loading = true;
                this.axios({
                    method: 'post',
                    url: '/basic/fieldConfig/delete',
                    params: {
                        id:this.delIds
                    }
                }).then(res => {
                    this.loading = false;
                    if(res.code === 200){
                        this.changeNum();
                        this.$Message.success("删除成功");
                        this.delFaultCodeShowF = false;
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .fieldManage{
        .formList{
            padding: 30px;
            .btn{
                margin-top: 20px;
                text-align: center;
                width: 100%;
                height: 40px;
            }
            .inputBorder{
                border: 1px solid #dcdee2;
                border-radius:4px;
            }
        }
    }
</style>

<style lang="scss">

</style>
